<!-- 更多停车弹出框 -->
<template>
    <div class="dy-panel">
      <div class="dy-panel-main">
        <div class="dy-panel-header">
          <div class="dy-panel-close" @click="closeCurrent"></div>
        </div>
        <div class="dy-panel-content">
          <contentTitle :title="'客流收入日趋势'"/>
          <div class="layChart" ref="drclbhqsRef"></div>
        </div>
        <div class="pd_abItems-contain">
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="pd-abItem-search">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import {onMounted, ref} from "vue";
  import ContentTitle from "../contentTitle.vue";
  import {drawLine} from "../../../util/chartUtil.js";
  import {ajaxRequest} from "../../../api/code.js";
  
    const emit = defineEmits(['closeChild']);
    const closeCurrent = function (){
      emit('closeChild')
    }
    const areacode = ref(null)
    const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
    const abItemsClick = function (item){
      abItems.value.forEach((res,i)=>{
        res.clazz = res.title === item.title?'selected':"";
      })
  
      if(item.title === '综合'){
        areacode.value = null
      }
      else if(item.title === '东(南)'){
        areacode.value = "01"
      }
      else if(item.title === '西(北)'){
        areacode.value = "02"
      }
      //分区切换刷新数据
      refreshData()
  
    }
  
    const drclbhqsRef = ref();
    let xData = ref([]);
    const yData = ref([]);
    const yData1 = ref([]);
    for (let i = 0;i < 31;i++){
      xData.value.push(i+'日');
      yData.value.push(parseInt(Math.random()*1000+""));
      yData1.value.push(parseInt(Math.random()*1000+""));
    }
    const klsr_legend = ref([`客流`, `收入`]);
    const drclbhqsOpt = ref({
      color: ['#5AFFFA', '#0DA7E5'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: '',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: klsr_legend,
        right: '3%',
        top: '8%',
        textStyle: {
          color: '#FFFFFF'
        },
        icon: 'rect',
        itemWidth: 18,
        itemHeight: 6
      },
      grid: {
        top: '25%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xData.value,
          axisLine: {
            lineStyle: {
              color: 'rgba(39,163,212)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 1,
            rotate: 45,
            textStyle: {
              color: 'white',
              fontSize: 12
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: "人次",
          nameTextStyle: {
            color: "#FFF",
            nameLocation: "end",
            padding: [0, 0, 0, -15]
          },
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(39,163,212,0.52)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(39,163,212,0.52)',
              type: 'dashed'
            }
          }
        },
        {
          type: 'value',
          name: "万元",
          nameTextStyle: {
            color: "#FFF",
            nameLocation: "end"
          },
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 0, 0.8)' // 黄色轴线
            }
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: klsr_legend.value[0],
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 4
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          },
          data: yData.value
        },
        {
          name: klsr_legend.value[1],
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            borderRadius: 4
          },
          yAxisIndex: 1, // 使用第二个 Y 轴（万元）
          emphasis: {
            focus: 'self'
          },
          data: yData1.value
        }
      ]
    });
    let drclbhqsChart;
    onMounted(()=>{
      drclbhqsChart = drawLine(drclbhqsRef.value,drclbhqsOpt.value);
      refreshData()
    });
    const search = function (){
      refreshData()
    }
  
   async function refreshData() {
    yData.value = []
    yData1.value = []
    const params = {
      areacode: areacode.value
    }
    const res = await ajaxRequest('post', 'getKlsrqs', params)
    if (res.data) {
      res.data.kl.forEach((item,index)=>{
        yData.value[parseInt(item.day)] = item.value
      })
      res.data.sr.forEach((item,index)=>{
        yData1.value[parseInt(item.day)] = item.value
      })
      drclbhqsOpt.value.series[0].data = yData.value
      drclbhqsOpt.value.series[1].data = yData1.value
    }
    drclbhqsChart.setOption(drclbhqsOpt.value)
  }
  </script>
  
  <style scoped>
  .dy-panel{
    position: fixed;
    top: 10vh;
    width: 100%;
    .dy-panel-main{
      background: rgba(5, 36, 44, 0.9);
      width: 80vh;
      min-height: 50vh;
      margin: 0 auto;
      padding-right: 2.5vh;
      padding-bottom: 2.5vh;
      position: relative;
      .dy-panel-header{
        height: 3vh;
        .dy-panel-close{
          position: absolute;
          height: 2.6vh;
          width: 2.6vh;
          background-image: url("../../../assets/img/public/关闭.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          right: 1vh;
          top: 2vh;
          cursor: pointer;
        }
      }
      .dy-panel-content{
        display: flex;
        padding: 1vh;
        flex-wrap: wrap;
      }
    }
  }
  .pd_abItems-contain{
    display: flex;
    justify-content: center;
    margin-top: 2vh;
    .pd_abItems-main{
      display: flex;
      border: 1px solid #FFFFFF;
      margin-right: 2vh;
      .pd_abItem-item{
        padding: 0.5vh 1.2vh;
        border-right: 1px solid #FFFFFF;
        cursor: pointer;
        font-size: 1.4vh;
      }
      .selected{
        background: #35CB9C;
        border: 1px solid #35CB9C;
      }
    }
    .pd-abItem-search{
      .pd-abItem-search-btn{
        border: none;
        background: #35CB9C;
        padding: 0.5vh 1.2vh;
        color: #FFFFFF;
        cursor: pointer;
  
      }
    }
  }
  
  </style>